<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kite</title>
</head>
<body>
<table>
    <tr>
        <td colspan="3">北</td>
        <td rowspan="3">东</td>
    </tr>
    <tr>
        <td rowspan="3">西</td>
        <td id="td-1" class="no-border"></td>
        <td id="td-2" class="no-border"></td>
    </tr>
    <tr>
        <td id="td-4" class="no-border"></td>
    </tr>
    <tr>
        <td colspan="3">南</td>
    </tr>
</table>
</body>
</html>


<style>
    h1 {
        font-size: 5em;
        text-align: center;
    }

    table {
        border: 5px solid gray;
        text-align: center;
    }

    table tr {
        border: 1px solid gray;
        text-align: center;
    }

    table td {
        border: 1px solid gray;
        text-align: center;
        width: 80px;
        height: 80px;
    }

    td.no-border {
        border: none;
    }

    #td-1 {
        border-right: dotted gray;
        border-bottom: dotted gray;
    }

    #td-2 {
        border-bottom: dotted gray;
    }

    #td-4 {
        border-right: dotted gray;
    }
</style>
